<div class="form-default-pannel">
    <div class="pannel-header">
        <span class="title">
            新建任务
        </span>
        <button nz-button nzType="primary" nzShape="round">返回</button>
    </div>
    <form nz-form class="validate-form" [formGroup]="validForm">
        <div class="pannel-body">
            <div class="form-item">
                <label class="form-label required">任务名称</label>
                <div class="form-input">
                    <input type="text" style="width: 480px;" nz-input placeholder="请输入任务名称" formControlName="name" />
                </div>
            </div>
            <div class="form-item">
                <label class="form-label required">任务类型</label>
                <div class="form-input">
                    <nz-radio-group formControlName="type">
                        <label nz-radio nzValue="T1"><span class="select-item">资产测绘</span></label>
                        <label nz-radio nzValue="T2"><span class="select-item">漏洞扫描</span></label>
                        <label nz-radio nzValue="T3"><span class="select-item">资产级漏洞扫描</span></label>
                    </nz-radio-group>
                </div>
            </div>
        </div>
        <div class="pannel-body">
            <div class="form-item">
                <label class="form-label required">任务分类</label>
                <div class="form-input">
                    <nz-radio-group formControlName="type2">
                        <label nz-radio nzValue="Common"><span class="select-item">普通任务</span></label>
                        <label nz-radio nzValue="Timer"><span class="select-item">定时任务</span></label>
                    </nz-radio-group>
                    <nz-range-picker formControlName="dateRange" (ngModelChange)="onChange($event)" nzShowTime></nz-range-picker>
                </div>
            </div>
            <div class="form-item">
                <label class="form-label required">区域</label>
                <div class="form-input">
                    <label nz-checkbox formControlName="designateAreaBool" (ngModelChange)="onChange2($event)"><span class="select-item">全选</span></label>
                    <checkbox-wrapper formControlName="taskCityList" [areaList]="areaList"></checkbox-wrapper>
                </div>
            </div>
            <div class="form-item">
                <label class="form-label required">监测级别</label>
                <div class="form-input">
                    <nz-radio-group formControlName="keyLevel">
                        <label nz-radio nzValue="All"><span class="select-item">全部</span></label>
                        <label nz-radio nzValue="Key"><span class="select-item">重点企业</span></label>
                        <label nz-radio nzValue="NonKey"><span class="select-item">非重点企业</span></label>
                    </nz-radio-group>
                </div>
            </div>
            <div class="form-item">
                <label class="form-label required">企业</label>
                <div class="form-input">
                    <nz-select style="width: 480px;" formControlName="enterpriseId" nzPlaceHolder="请选择企业">
                        <nz-option nzValue="" nzLabel="全部企业"></nz-option>
                        <nz-option *ngFor="let item of enterpriseList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
                      </nz-select>
                </div>
            </div>
            <div class="form-item" *ngIf="validForm.value.type === 'T2' || validForm.value.type === 'T3'">
                <label class="form-label required">POC</label>
                <div class="form-input">
                    <nz-select style="width: 480px;" formControlName="pocId" nzPlaceHolder="请选择POC">
                        <nz-option *ngFor="let item of pocList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
                      </nz-select>
                </div>
            </div>
            <div class="form-item" *ngIf="validForm.value.type === 'T2' || validForm.value.type === 'T3'">
                <label class="form-label required">漏洞</label>
                <div class="form-input">
                    <nz-radio-group formControlName="vulnerabilityId">
                        <label nz-radio nzValue="All"><span class="select-item">全部</span></label>
                        <label nz-radio nzValue="Key"><nz-select style="width: 480px;" formControlName="enterpriseId" nzPlaceHolder="请选择漏洞">
                            <nz-option *ngFor="let item of vulnerabilityList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
                          </nz-select></label>
                    </nz-radio-group>
                </div>
            </div>

            <div class="form-item">
                <label class="form-label required">IP/Domain</label>
                <div class="form-input ipdomain">
                    <nz-radio-group formControlName="allIp" (ngModelChange)="changeIp($event)" style="vertical-align: top;">
                        <label style="vertical-align: top;line-height: 32px;margin-left: 10px;margin-right: 0;" nz-radio nzValue="Y"><span class="select-item">全部</span></label>
                        <label style="vertical-align: top;line-height: 32px;margin-left: 10px;margin-right: 0;" nz-radio nzValue="N"> </label>
                    </nz-radio-group>
                    <textarea style="width: 150px;" nz-input [ngClass]="{disabled:validForm.controls.allIp.value === 'Y'}" [readonly]="validForm.controls.allIp.value === 'Y'" formControlName="ipRange"></textarea>
                    <span class="ipdomain-text">端口</span>
                    <textarea style="width: 150px;" nz-input [ngClass]="{disabled:validForm.controls.allIp.value === 'Y'}" [readonly]="validForm.controls.allIp.value === 'Y'" formControlName="port"></textarea>
                    <span class="ipdomain-text">协议</span>
                    <nz-select style="width: 280px;vertical-align: top;" [nzDisabled]="validForm.controls.allIp.value === 'Y'" formControlName="protocolId" nzPlaceHolder="请选择协议">
                        <nz-option *ngFor="let item of protocolList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
                    </nz-select>
                </div>
            </div>
        </div>
        <div class="pannel-body">
            <div class="form-item">
                <label class="form-label required">宽带</label>
                <div class="form-input">
                    <nz-select style="width: 480px;" formControlName="bandWidth" nzPlaceHolder="请选择宽带">
                        <nz-option nzValue="1" nzLabel="电信"></nz-option>
                        <nz-option nzValue="2" nzLabel="网通"></nz-option>
                        <nz-option nzValue="3" nzLabel="其他"></nz-option>
                      </nz-select>
                </div>
            </div>
            <div class="form-item">
                <label class="form-label">任务描述</label>
                <div class="form-input">
                    <textarea style="width: 480px;height: 100px;" formControlName="desc" nz-input></textarea>
                </div>
            </div>
        </div>
        <div class="form-button">
            <button nz-button nzType="primary" nzShape="round" (click)="submit()">保存</button>
            <button nz-button nzType="primary" nzGhost nzShape="round" routerLink="/taskMgmt/taskList">取消</button>
        </div>
    </form>
</div>